<template>
  <div
    class="zz-card-wrap"
    :class="{
      'top-img': position == 'top',
      'left-img': position == 'left',
      'bottom-img': position == 'bottom',
      'card-border': border,
    }"
  >
    <div class="zz-card-content-wrap">
      <div class="content-title" :class="{ small: titleSize == 'small' }">
        <slot name="title"></slot>
      </div>
      <div
        class="content-intro"
        :style="`${height ? `height:${height}px;` : ''}`"
      >
        <slot name="content"></slot>
      </div>
    </div>
    <div class="zz-card-img-wrap">
      <!-- <img :src="require('@/assets/img/intro/intro1.png')" alt="" /> -->
      <slot name="img"></slot>
    </div>
  </div>
</template>

<script>
// import img from '@/assest/img/1.jpg'
// console.log(img)
export default {
  data() {
    return {
      // img
    };
  },

  components: {},
  props: {
    position: {
      type: String,
      default: "right",
    },
    border: {
      type: Boolean || String,
      default: false,
    },
    height: {
      type: Number,
      require: false,
    },
    titleSize: {
      type: String,
      default: "default",
    },
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.zz-card-wrap {
  display: flex;
  margin-bottom: 10px;
  height: 100%;
  .zz-card-content-wrap {
    flex: 1;
    margin-right: 20px;
    .content-title {
      font-size: 24px;
      font-weight: bold;
      &.small {
        font-size: 18px;
        font-weight: normal;
      }
    }
    .content-intro {
      margin-top: 5px;
      font-size: 16px;
      line-height: 200%;
      p {
        font-size: 14px;
        line-height: 170%;
      }
    }
  }
  .zz-card-img-wrap {
    // max-width: 380px;
    flex-grow: 0;
    img {
      max-width: 100%;
    }
  }

  // 上下格局的卡片
  &.top-img {
    position: relative;
    flex-direction: column;
    padding: 45px 20px 20px;
    &::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 50%;
      width: 50%;
      height: 3px;
      transform: translate(-50%, 0);
      background: $primary;
    }
    .zz-card-img-wrap {
      max-width: 100%;
      width: auto;
      margin: 0 auto;
      order: 1;
      // img {
      //   max-width: 100%;
      // }
    }
    .zz-card-content-wrap {
      order: 2;
      margin-right: 0;
      .content-title {
        text-align: center;
        margin: 48px -5px 0;
        font-weight: normal;
      }
      .content-intro {
        color: $subColor;
        min-height: 100px;
      }
    }
  }
  &.left-img {
    .zz-card-img-wrap {
      order: 1;
      margin-right: 40px;
      // min-width: 254px;
      width: auto;
    }
    .zz-card-content-wrap {
      order: 2;
    }
  }
  &.bottom-img {
    flex-direction: column;
    .zz-card-img-wrap {
      order: 2;
      margin-top: 40px;
      min-width: 254px;
      .content-title {
        text-align: center;
        margin: 48px -5px 0;
        font-weight: normal;
      }
    }
    .zz-card-content-wrap {
      order: 1;
    }
  }
  &.card-border {
    border: 1px solid $border;
  }
}

@media screen and (max-width: 768px) {
  .zz-card-wrap {
    flex-direction: column;
    margin-bottom: .35rem;
    .zz-card-content-wrap {
      margin-top: .25rem;
      margin-right: 0;
      order: 2;
      .content-title {
        font-weight: normal;
        font-size: .48rem;
        &.small {
        }
      }
      .content-intro {
        margin-top: .1rem;
        font-size: .2rem;
        p {
          
        }
      }
    }
    .zz-card-img-wrap {
      img {
        width: 100% !important;
        order: 1;
      }
    }

    // 上下格局的卡片
    &.top-img {
      padding: .8rem .5rem;
      &::before {
      }
      .zz-card-img-wrap {
      }
      .zz-card-content-wrap {
        .content-title {
          margin-top: .4rem;
        }
        .content-intro {
        }
      }
    }
    &.left-img {
      .zz-card-img-wrap {
        
      }
      .zz-card-content-wrap {
        
      }
    }
    &.bottom-img {
      .zz-card-img-wrap {
        margin-top: .2rem;
        .content-title {
          
        }
      }
      .zz-card-content-wrap {
      }
    }
    &.card-border {
    }
  }
}
</style>